<template>
  <a-list size="small">
    <template #header>
      <a-row>
        <a-col :span="9">快捷设置</a-col>
        <a-col :span="15">
          <a-radio-group @change="setAllPermission">
            <a-radio value="H">隐藏</a-radio>
            <a-radio value="D">禁用</a-radio>
            <a-radio value="E">编辑</a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </template>

    <a-list-item v-for="(item, index) of formItem" :key="index">
      <a-row>
        <a-col :span="9">
          <a-tag color="arcoblue">
            {{ item.name }}
          </a-tag>
        </a-col>
        <a-col :span="15">
          <a-radio-group v-model="formPermission[item.id]">
            <a-radio value="H">隐藏</a-radio>
            <a-radio value="D">禁用</a-radio>
            <a-radio value="E">编辑</a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </a-list-item>
  </a-list>
</template>

<script lang="ts" setup>
import { ref, defineModel, defineProps, onMounted } from 'vue';
import { detailForm } from '@/api/system/form';

const formPermission = defineModel({ type: Object });

const props = defineProps({
  formId: {
    type: String,
    default: () => {
      return '';
    }
  }
});

const formItem = ref([]);

const setAllPermission = (value: string | number | boolean, ev: Event) => {
  Object.keys(formPermission.value).forEach(key => {
    formPermission.value[key] = value;
  });
};

onMounted(() => {
  detailForm(props.formId).then(res => {
    formItem.value = res.data.formItem;
    formItem.value.forEach(item => {
      formPermission.value[item.id] = formPermission.value[item.id] || 'E';
    });
  });
});

</script>

<script lang="ts">
export default {
  name: 'ConfigFormPermission'
};
</script>

<style scoped lang="less">

</style>